<template>
    <ul class="list-group list-group-flush" v-if="props.arr.length != 0">
        <li class="list-group-item" v-for="item in props.arr">
            <router-link :to="{ path: '/detail', query: { id: item.id } }">
                <div class="media">
                    <div class="media-body">
                        <h5 class="mt-0 mb-1" style="font-weight: bold;">{{ item.title }}</h5>
                        <div style="color: #666;">{{ item.createAt }} </div>
                        <p v-html="item.content"
                            style="padding: 10px 0px 0px; font-family: Arial, Helvetica, sans-serif;"
                            class="ellipsis-multiline">
                        </p>
                        <div class="tag">标签: {{ item.tag }}</div>
                        <!-- <div>作者: {{ item.author }}</div> -->
                    </div>
                    <img :src="item.src" class="ml-3" :alt="item.src">
                </div>
            </router-link>
        </li>
    </ul>
    <p v-else style="padding: 50px 10px ;text-align: left;">
        暂无内容列表~~
    </p>
</template>

<script lang="ts" setup>
// 自定义属性 接收父组件传递的数组
interface IItem {
    [key: string]: string | any
}
interface Props {
    arr: Array<IItem>
}
const props = defineProps<Props>()
// const { arr } = props
console.log(props)
</script>

<style lang="less">
.list-group-item {
    cursor: pointer;

    a {
        text-decoration: none;
    }

    h5 {
        color: #000;
    }

    p {
        color: #666;
    }

    .tag {
        color: #ccc;
    }

    .media {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .media-body {
            width: calc(100% - 20%);
        }

        img {
            width: 20%;
        }
    }

    &:hover {
        text-decoration: underline;
    }
}

@media (max-width:576px) {
    .list-group-item {
        .media {
            display: block;

            .media-body {
                width: 100%;
            }

            img {
                width: 100%;
                display: none;
            }
        }
    }
}
</style>